<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="商铺名称" prop="shopName">
        <el-input
          v-model="queryParams.shopName"
          placeholder="请输入商铺名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商铺联系方式" prop="shopPhone">
        <el-input
          v-model="queryParams.shopPhone"
          placeholder="请输入商铺联系方式"
          clearable
          @keyup.enter.native="handleQuery"
          onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"
        />
      </el-form-item>
      <el-form-item label="处理状态" prop="state1">
        <el-select
          v-model="queryParams.state1"
          placeholder="用户状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in state1"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:user:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      :data="typeList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="用户名称" align="center" prop="lrname" />
      <el-table-column label="用户联系方式" align="center" prop="lrtel" />
      <el-table-column label="商铺名称" align="center" prop="shopName" />
      <el-table-column label="商户地址" align="center" prop="shopAddress" />
      <el-table-column label="商铺联系方式" align="center" prop="shopPhone" />
      <el-table-column label="商铺门头照片" align="center" prop="shopMphone">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.shopMphone"
            alt=""
            weight="20"
            style="height: 50px; width: auto"
            :preview-src-list="srcList"
            @click="look(scope.row)"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="商铺营业执照"
        align="center"
        prop="shopBusinessLicense"
      >
        <template slot-scope="scope">
          <el-image
            :src="scope.row.shopBusinessLicense"
            alt=""
            weight="20"
            style="height: 50px; width: auto"
            :preview-src-list="srcList1"
            @click="look1(scope.row)"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="处理状态" align="center" prop="state1">
        <template slot-scope="scope">
          <span v-if="scope.row.state1 == '1'">未处理</span>
          <span v-if="scope.row.state1 == '0'">已处理</span>
        </template>
      </el-table-column>
      <el-table-column
        label="申请时间"
        align="center"
        prop="createTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.createTime, "{YY}-{MM}-{DD} {hh}:{mm}:{ss}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-if="scope.row.state1 == 1">处理
                    </el-button> -->
          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">作废</el-button> -->
          <div class="cz">
            <div class="zuofei" @click="handleZF(scope.row)" v-if="scope.row.state1 != 0 || scope.row.type != 2">
              <img src="@/assets/images/banned.png" alt="" />
              <span>作废</span>
            </div>
            <div class="zuofei" @click="handlezuofeiLook(scope.row)" v-if="scope.row.state1 == 0 || scope.row.type == 2">
              <span>查看作废原因</span>
            </div>
            <div class="transform_seller" @click="handleTransform(scope.row)" v-if="scope.row.state1 != 0 || scope.row.type != 1">
              <img src="@/assets/images/seller.png" alt="" />
              <span>转为商家</span>
            </div>
            <div class="transform_seller" @click="handleshopLook(scope.row)" v-if="scope.row.state1 == 0 && scope.row.type == 1">
              <span>查看商家</span>
            </div>
          </div>
          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handlezuofeiLook(scope.row)"
                        v-if="scope.row.state1 == 0 && scope.row.type == 2">查看作废原因</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleshopLook(scope.row)"
                        v-if="scope.row.state1 == 0 && scope.row.type == 1">查看商家</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="zfTitle" :visible.sync="zfOpen" width="460px" append-to-body top="25vh" :show-close="false">
        <!-- <div class="zf_title">作废原因</div> -->
        <div class="zf_input">
            <el-input
            v-model="cancelVal"
            placeholder="必填，请输入作废原因"
            type="textarea"
            clearable
            style="width: 420px;height: 100px;"
            rows="4"
          >
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitZF">确 定</el-button>
        <el-button @click="cancelZF">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 处理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form1" :model="form1" :rules="rules" label-width="100px">
        <el-form-item
          label="商铺门头照片"
          prop="shopMphone"
          style="width: 400px"
        >
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :disabled="true"
            :show-file-list="false"
            :on-success="shopMphoneSuccess"
            :before-upload="beforeshopMphoneUpload"
            name="fileName"
          >
            <el-image
              v-if="form1.shopMphone"
              :src="form1.shopMphone"
              class="avatar"
              :preview-src-list="srcList2"
            >
            </el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商铺营业执照" prop="shopBusinessLicense">
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :disabled="true"
            :show-file-list="false"
            :on-success="shopbackPicSuccess"
            :before-upload="shopbackPicUpload"
            name="fileName"
          >
            <el-image
              v-if="form1.shopBusinessLicense"
              :src="form1.shopBusinessLicense"
              class="avatar"
              :preview-src-list="srcList3"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名称" prop="lrname" style="width: 400px">
          <el-input
            v-model="form1.lrname"
            :disabled="true"
            placeholder="请输入用户名称"
            style="width: 204px"
          />
        </el-form-item>
        <el-form-item label="用户联系方式" prop="lrtel">
          <el-input
            v-model="form1.lrtel"
            :disabled="true"
            placeholder="请输入用户联系方式"
          />
        </el-form-item>
        <el-form-item label="商铺名称" prop="shopName" style="width: 400px">
          <el-input
            v-model="form1.shopName"
            :disabled="true"
            placeholder="请输入商铺名称"
            style="width: 204px"
          />
        </el-form-item>
        <el-form-item label="商户地址" prop="shopAddress">
          <el-input
            v-model="form1.shopAddress"
            :disabled="true"
            placeholder="请输入商户地址"
          />
        </el-form-item>
        <el-form-item
          label="商户联系方式"
          prop="shopPhone"
          style="width: 400px"
        >
          <el-input
            v-model="form1.shopPhone"
            :disabled="true"
            placeholder="请输入商户联系方式"
            style="width: 204px"
          />
        </el-form-item>
        <el-form-item label="处理">
          <template>
            <el-radio-group v-model="form1.type">
              <el-radio :label="0">转为商家</el-radio>
              <el-radio :label="1">作废</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="作废原因" prop="remark" v-if="form1.type == '1'">
          <el-input
            v-model="form1.remark"
            placeholder="请输入作废原因"
            type="textarea"
            clearable
            style="width: 204px"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加商家对话框 -->
    <el-dialog
      :title="title1"
      :visible.sync="open1"
      width="800px"
      append-to-body
      @close="close"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item
          label="店铺商家logo或头像"
          prop="shoplogo"
          style="width: 350px"
        >
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="fileName"
          >
            <img v-if="form.shoplogo" :src="form.shoplogo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺背景图片" prop="shopbackPic">
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :show-file-list="false"
            :on-success="shopbackPicSuccess"
            :before-upload="shopbackPicUpload"
            name="fileName"
          >
            <img
              v-if="form.shopbackPic"
              :src="form.shopbackPic"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="商铺门头照片"
          prop="shopMphone"
          style="width: 350px"
        >
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :show-file-list="false"
            :on-success="shopMphoneSuccess"
            :before-upload="beforeshopMphoneUpload"
            name="fileName"
          >
            <img
              v-if="form.shopMphone"
              :src="form.shopMphone"
              class="avatar"
              :preview-src-list="srcList4"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商铺营业执照" prop="shopBusinessLicense">
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :show-file-list="false"
            :on-success="shopBusinessLicenseSuccess"
            :before-upload="shopBusinessLicenseUpload"
            name="fileName"
          >
            <img
              v-if="form.shopBusinessLicense"
              :src="form.shopBusinessLicense"
              class="avatar"
              :preview-src-list="srcList5"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商户标签1" prop="shoptype1">
          <el-input
            v-model.trim="form.shoptype1"
            placeholder="请输入商户标签"
          />
        </el-form-item>
        <el-form-item label="商户标签2" prop="shoptype2">
          <el-input v-model="form.shoptype2" placeholder="请输入商户标签" />
        </el-form-item>
        <el-form-item label="商户标签3" prop="shoptype3">
          <el-input v-model="form.shoptype3" placeholder="请输入商户标签" />
        </el-form-item>
        <el-form-item label="商户名称" prop="shopname">
          <el-input v-model.trim="form.shopname" placeholder="请输入商户名称" />
        </el-form-item>
        <el-form-item label="商户排序" prop="shopTop">
          <el-input v-model="form.shopTop" placeholder="请输入商户排序" />
        </el-form-item>
        <el-form-item label="商家账号" prop="shopnumber">
          <el-input
            v-model.trim="form.shopnumber"
            placeholder="请输入商家账号"
          />
        </el-form-item>
        <el-form-item label="商家密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入商家密码" />
        </el-form-item>
        <!-- 1--金 2--银 3--优选商家 -->
        <el-form-item label="商家等级" prop="type">
          <el-select
            v-model="form.type"
            placeholder="请输入商家等级"
            clearable
            style="width: 204px"
          >
            <el-option
              v-for="dict in type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="当前负责人" prop="shopuser">
          <el-input
            v-model.trim="form.shopuser"
            placeholder="请输入当前负责人"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="shoptel">
          <el-input
            v-model.trim="form.shoptel"
            maxlength="11"
            placeholder="请输入联系方式"
          />
        </el-form-item>
        <!-- 1--婚纱摄影  2--婚纱礼服  3--婚礼策划  4--婚宴酒店 -->
        <el-form-item label="商家类型" prop="shopType">
          <el-select
            v-model.trim="form.shopType"
            placeholder="请输入商家类型"
            clearable
            style="width: 204px"
          >
            <el-option
              v-for="dict in shopType"
              :key="dict.key"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>
        <!-- 0--正常  1--关闭 -->
        <el-form-item label="商家状态" prop="state">
          <el-select
            v-model.trim="form.state"
            placeholder="请输入商家状态"
            clearable
            style="width: 204px"
          >
            <el-option
              v-for="dict in state"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="地图搜索">
          <el-amap-search-box
            class="search-box"
            style="width: 560px; height: 36px"
            :default="defaultValue"
            :search-option="searchOption"
            :on-search-result="onSearchResult"
          >
          </el-amap-search-box>
        </el-form-item>
        <!-- 搜索 -->
        <el-form-item label="地图">
          <el-amap
            ref="map"
            vid="amapDemo"
            :events="events"
            :center="center"
            :zoom="zoom"
            class="amap-demo"
            style="width: 560px; height: 180px"
          >
            <el-amap-marker :position="center" key="100"></el-amap-marker>
          </el-amap>
          <!-- 地图 -->
        </el-form-item>
        <el-form-item label="商家地址" prop="shopaddress" style="width: 350px">
          <!-- <el-cascader size="large" ref="cascader" :options="options" v-model.trim="selectedOptions"
                        @change="handleChange">
                    </el-cascader> -->
          {{ form.shopaddress || "请在地图上选择商家地址" }}
          <!-- <el-input v-model.trim="form.shopaddress" placeholder="请在地图上搜索商家地址" /> -->
        </el-form-item>
        <el-form-item label="商家详细地址" prop="shopaddressb">
          <el-input
            placeholder="请输入商家详细地址"
            v-model="form.shopaddressb"
          ></el-input>
        </el-form-item>
        <el-form-item label="商家经纬度" prop="shopJwd" style="width: 350px">
          {{ form.shopJwd || "请在地图上选择商家地址" }}
          <!-- <el-input v-model.trim="form.shopJwd" placeholder="如111.1111,111.1111"></el-input> -->
        </el-form-item>
        <el-form-item label="商家简介" prop="shopbrief">
          <el-input
            v-model.trim="form.shopbrief"
            type="textarea"
            placeholder="请输入商家简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="最高价格" prop="shopmaxPrice">
          <el-input
            v-model.trim="form.shopmaxPrice"
            placeholder="请输入最高价格"
          />
        </el-form-item>
        <el-form-item label="最低价格" prop="shopminPrice">
          <el-input
            v-model.trim="form.shopminPrice"
            placeholder="请输入最低价格"
          />
        </el-form-item>
        <el-form-item label="客资扣费标准" prop="shopspendCmMoney">
          <el-input
            v-model.trim="form.shopspendCmMoney"
            placeholder="请输入客资扣费标准"
          />
        </el-form-item>
        <!-- <el-form-item label="成交订单扣除界限" prop="shopxiane">
                    <el-input v-model.trim="form.shopxiane" placeholder="成交订单扣除界限" />
                </el-form-item> -->
        <el-form-item label="成交扣费标准" prop="shopspendDealMoney">
          <el-input
            v-model.trim="form.shopspendDealMoney"
            placeholder="请输入成交扣费标准"
          />
        </el-form-item>
        <!--成交扣费比率min=1% max=100%  -->
        <el-form-item label="成交扣费比率" prop="shoprate" style="width: 710px">
          <!-- <el-input v-model.trim="form.shoprate" placeholder="请输入成交扣费比率,如5%" /> -->
          <!-- style="width: 800px;" -->
          <template>
            <div class="block">
              <el-slider v-model="form.shoprate" show-input></el-slider>
            </div>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="xinzeng">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看作废原因 -->
    <el-dialog
      :title="title2"
      :visible.sync="open2"
      width="800px"
      append-to-body
    >
      <el-form ref="form2" :model="form1" label-width="100px" :disabled="edit">
        <el-form-item label="作废原因" prop="remark">
          <el-input
            v-model="form2.remark"
            placeholder="请输入作废原因"
            type="textarea"
            clearable
            style="width: 180px"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看商家 -->
    <el-dialog
      :title="title3"
      :visible.sync="open3"
      width="800px"
      append-to-body
      @close="close"
    >
      <el-form ref="form" :model="form" label-width="150px" :disabled="edit">
        <el-form-item
          label="店铺商家logo或头像"
          prop="shoplogo"
          style="width: 350px"
        >
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="fileName"
          >
            <img v-if="form.shoplogo" :src="form.shoplogo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺背景图片" prop="shopbackPic">
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :show-file-list="false"
            :on-success="shopbackPicSuccess"
            :before-upload="shopbackPicUpload"
            name="fileName"
          >
            <el-image
              v-if="form.shopbackPic"
              :src="form.shopbackPic"
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="商铺门头照片"
          prop="shopMphone"
          style="width: 350px"
        >
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :disabled="true"
            :show-file-list="false"
            :on-success="shopMphoneSuccess"
            :before-upload="beforeshopMphoneUpload"
            name="fileName"
          >
            <el-image
              v-if="form.shopMphone"
              :src="form.shopMphone"
              class="avatar"
              :preview-src-list="srcList6"
            >
            </el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商铺营业执照" prop="shopBusinessLicense">
          <el-upload
            class="avatar-uploader"
            :action="url"
            accept=".jpg, .png"
            :headers="headers"
            :disabled="true"
            :show-file-list="false"
            :on-success="shopbackPicSuccess"
            :before-upload="shopbackPicUpload"
            name="fileName"
          >
            <el-image
              v-if="form.shopBusinessLicense"
              :src="form.shopBusinessLicense"
              class="avatar"
              :preview-src-list="srcList7"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商户标签1" prop="shoptype1">
          <el-input
            v-model.trim="form.shoptype1"
            placeholder="请输入商户标签"
          />
        </el-form-item>
        <el-form-item label="商户标签2" prop="shoptype2">
          <el-input v-model="form.shoptype2" placeholder="请输入商户标签" />
        </el-form-item>
        <el-form-item label="商户标签3" prop="shoptype3">
          <el-input v-model="form.shoptype3" placeholder="请输入商户标签" />
        </el-form-item>
        <el-form-item label="商户名称" prop="shopname">
          <el-input v-model.trim="form.shopname" placeholder="请输入商户名称" />
        </el-form-item>
        <el-form-item label="商户排序" prop="shopTop">
          <el-input v-model="form.shopTop" placeholder="请输入商户排序" />
        </el-form-item>
        <el-form-item label="商家账号" prop="shopnumber">
          <el-input
            v-model.trim="form.shopnumber"
            placeholder="请输入商家账号"
          />
        </el-form-item>
        <el-form-item label="商家密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入商家密码" />
        </el-form-item>
        <!-- 1--金 2--银 3--优选商家 -->
        <el-form-item label="商家等级" prop="type">
          <el-select
            v-model="form.type"
            placeholder="请输入商家等级"
            clearable
            style="width: 204px"
          >
            <el-option
              v-for="dict in type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="当前负责人" prop="shopuser">
          <el-input
            v-model.trim="form.shopuser"
            placeholder="请输入当前负责人"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="shoptel">
          <el-input
            v-model.trim="form.shoptel"
            maxlength="11"
            placeholder="请输入联系方式"
          />
        </el-form-item>
        <!-- 1--婚纱摄影  2--婚纱礼服  3--婚礼策划  4--婚宴酒店 -->
        <el-form-item label="商家类型" prop="shopType">
          <el-select
            v-model.trim="form.shopType"
            placeholder="请输入商家类型"
            clearable
            style="width: 204px"
          >
            <el-option
              v-for="dict in shopType"
              :key="dict.key"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>
        <!-- 0--正常  1--关闭 -->
        <el-form-item label="商家状态" prop="state">
          <el-select
            v-model.trim="form.state"
            placeholder="请输入商家状态"
            clearable
            style="width: 204px"
          >
            <el-option
              v-for="dict in state"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="地图搜索">
                    <el-amap-search-box class="search-box" style="width:600px;height:36px;" :default="defaultValue"
                        :search-option="searchOption" :on-search-result="onSearchResult">
                    </el-amap-search-box>
                </el-form-item>
                <el-form-item label="地图">
                    <el-amap ref="map" vid="amapDemo" :events="events" :center="center" :zoom="zoom" class="amap-demo"
                        style="width:600px;height:180px;">
                        <el-amap-marker :position="center" key="100"></el-amap-marker>
                    </el-amap>
                </el-form-item> -->
        <el-form-item label="商家地址" prop="shopaddress" style="width: 355px">
          {{ form.shopaddress || "请在地图上选择商家地址" }}
        </el-form-item>
        <el-form-item label="商家详细地址" prop="shopaddressb">
          <el-input
            placeholder="请输入商家详细地址"
            v-model="form.shopaddressb"
          ></el-input>
        </el-form-item>
        <el-form-item label="商家经纬度" prop="shopJwd" style="width: 355px">
          {{ form.shopJwd || "请在地图上选择商家地址" }}
        </el-form-item>
        <el-form-item label="商家简介" prop="shopbrief">
          <el-input
            v-model.trim="form.shopbrief"
            type="textarea"
            placeholder="请输入商家简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="最高价格" prop="shopmaxPrice">
          <el-input
            v-model.trim="form.shopmaxPrice"
            placeholder="请输入最高价格"
          />
        </el-form-item>
        <el-form-item label="最低价格" prop="shopminPrice">
          <el-input
            v-model.trim="form.shopminPrice"
            placeholder="请输入最低价格"
          />
        </el-form-item>
        <el-form-item label="客资扣费标准" prop="shopspendCmMoney">
          <el-input
            v-model.trim="form.shopspendCmMoney"
            placeholder="请输入客资扣费标准"
          />
        </el-form-item>
        <el-form-item label="成交订单扣除界限" prop="shopxiane">
          <el-input
            v-model.trim="form.shopxiane"
            placeholder="成交订单扣除界限"
          />
        </el-form-item>
        <el-form-item label="成交扣费标准" prop="shopspendDealMoney">
          <el-input
            v-model.trim="form.shopspendDealMoney"
            placeholder="请输入成交扣费标准"
          />
        </el-form-item>
        <!--成交扣费比率min=1% max=100%  -->
        <el-form-item label="成交扣费比率" prop="shoprate" style="width: 710px">
          <!-- <el-input v-model.trim="form.shoprate" placeholder="请输入成交扣费比率,如5%" /> -->
          <template>
            <div class="block">
              <el-slider v-model="form.shoprate" show-input></el-slider>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-drawer
      title="转为商家"
      :visible.sync="drawer"
      :direction="direction"
      size="60%"
      :before-close="handleClose"
    >
      <div class="drawer">
        <div class="basic_info">
            <!-- <div class="basic_title">
                <div style="width: 10px;height: 10px;background: #5672FA;margin-right: 10px;border-radius: 50%;"></div>
                <div style="font-weight: 600;font-size: 16px;color: #1F2026;margin-right: 120px;">基本信息</div>
                <div @click="handleEditStatus" style="cursor: pointer;">
                    <i class="el-icon-edit"></i>
                    <span style="font-size: 14px;color: #5672FA;">{{ editStatus == 0 ? '修改' : '保存' }}</span>
                </div>
            </div> -->
            <div class="basic_info_body">
                <div class="row_group">
                    <div class="username row_item">
                        <div>品牌名称：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{ thisShopMessage.shopname }}</div>
                        <el-input v-model="thisShopMessage.shopname" v-if="editStatus == 1" style="width: 320px;" placeholder="请输入"></el-input>
                    </div>
                    <div class="fzr row_item">
                        <div>当前负责人：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{ thisShopMessage.shopuser }}</div>
                        <el-select v-model="thisShopMessage.shopuser" placeholder="请选择" v-if="editStatus == 1">
                            <el-option
                            v-for="item in options1"
                            :key="item.selectValue"
                            :label="item.label"
                            :value="item.selectValue" size="small">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row_group">
                  <div class="jd_type" style="margin-bottom: 0;width: 50%;">
                        <div>接单类型：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopType}}</div>
                        <el-select v-model="thisShopMessage.shopType" placeholder="请选择" v-if="editStatus == 1">
                            <el-option
                            v-for="item in shopType"
                            :key="item.key"
                            :label="item.label"
                            :value="item.key" size="small">
                            </el-option>
                        </el-select>
                </div>
                    <div class="level">
                        <div>商家等级：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.type}}</div>
                        <el-select v-model="thisShopMessage.type" placeholder="请选择" v-if="editStatus == 1">
                            <el-option
                            v-for="item in type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" size="small">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <!-- <div style="" class="row_group">
                    <div class="rank" v-if="editStatus == 0">
                        <div>商户排行：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{basic_info.rank}}</div>
                    </div>
                </div> -->
                <div style="" class="row_group">
                    <div class="level" disabled>
                        <div>商家账户：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopnumber}}</div>
                        <el-input v-model="thisShopMessage.shopnumber" v-if="editStatus == 1"style="width: 320px;" placeholder="请输入" ></el-input>
                    </div>
                    <div class="rank">
                        <div>商家密码：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.password}}</div>
                        <el-input v-model="thisShopMessage.password" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div style="" class="row_group">
                    <div class="level">
                        <div>*客服电话：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shoptel}}</div>
                        <el-input v-model="thisShopMessage.shoptel" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
                    </div>
                    <div class="rank">
                        <div>商户标签：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shoptype1}}</div>
                        <el-input v-model="thisShopMessage.shoptype1" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div style="" class="row_group">
                    <div class="rank">
                        <div>商家状态：</div>
                        <div class="confirm_text" v-if="editStatus == 0" style="color: #23BB7B;">{{thisShopMessage.state== '1' ? '正常' : '禁用'}}</div>
                        <el-select v-model="thisShopMessage.state" placeholder="请选择" v-if="editStatus == 1">
                            <el-option
                            v-for="item in options3"
                            :key="item.selectValue"
                            :label="item.label"
                            :value="item.selectValue" size="small">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="level">
                        <div>商家详细地址：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopaddress}}</div>
                        <el-input v-model="thisShopMessage.shopaddress" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div class="level" style="margin-bottom: 15px;">
                        <div>商户排序：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopTop}}</div>
                        <el-input v-model="thisShopMessage.shopTop" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
                    </div>
                <div class="jd_type">
                        <div>商家简介：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopbrief}}</div>
                        <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            v-model="thisShopMessage.shopbrief" v-if="editStatus == 1" style="width: 851px;">
                        </el-input>
                </div>
                <div style="" class="row_group">
                    <div class="level">
                        <div>最高价格：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopmaxPrice}}</div>
                        <el-input v-model="thisShopMessage.shopmaxPrice" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
                    </div>
                    <div class="rank">
                        <div>最低价格：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopminPrice}}</div>
                        <el-input v-model="thisShopMessage.shopminPrice" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div style="" class="row_group">
                    <div class="level">
                        <div>*客资扣费标准：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopspendCmMoney}}</div>
                        <el-select v-model="thisShopMessage.shopspendCmMoney" placeholder="请选择" v-if="editStatus == 1">
                        <el-option
                            v-for="item in options5"
                            :key="item.selectValue"
                            :label="item.label"
                            :value="item.selectValue" size="small">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="rank">
                        <div>*成交扣费标准：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shopspendDealMoney}}</div>
                        <el-input v-model="thisShopMessage.shopspendDealMoney" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div style="" class="row_group">
                    <div class="level" style="width: 45%;">
                        <div>*商成交扣费率：</div>
                        <div class="confirm_text" v-if="editStatus == 0">{{thisShopMessage.shoprate}}</div>
                      <el-input v-model="thisShopMessage.shoprate" style="width: 320px;" v-if="editStatus == 1" placeholder="请输入"></el-input>
<!--                      <el-select v-model="thisShopMessage.shoprate" placeholder="请选择" v-if="editStatus == 1">-->
<!--                        <el-option-->
<!--                            v-for="item in options5"-->
<!--                            :key="item.selectValue"-->
<!--                            :label="item.label"-->
<!--                            :value="item.selectValue" size="small">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
                    </div>
                    <div class="rank progress" style="width: 50%;" @mousedown="onDragStart">
                        <!-- @mousedown="mouseDown(this, item)"
                        @mouseup="mouseUp"
                        @mousemove="mouseMove" -->
                      <el-progress style="width: 100%;" :stroke-width="10" :percentage="thisShopMessage.precent"></el-progress>
                    </div>
                </div>
                <div style="" class="row_group">
                    <div class="level">
                        <div>店铺logo/头像：</div>
                        <div class="confirm_text" v-if="editStatus == 0">
                            <img :src="thisShopMessage.shoplogo" style="width: 74px;height: 74px;" alt="">
                        </div>
                        <el-upload
                        class="avatar-uploader"
                        :action="url"
                        accept=".jpg, .png"
                        :headers="headers"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess2"
                        :before-upload="beforeAvatarUpload2"
                        name="fileName"
                      >
                        <img v-if="thisShopMessage.shoplogo" :src="thisShopMessage.shoplogo" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                    <div class="rank">
                        <div>店铺背景图片：</div>
                        <div class="confirm_text" v-if="editStatus == 0">
                            <img :src="thisShopMessage.shopbackPic" style="width: 74px;height: 74px;" alt="">
                        </div>
                        <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :headers="headers"
                        :show-file-list="false"
                        :on-success="shopbackPicSuccess2"
                        name="fileName"
                        :before-upload="shopbackPicUpload2" v-if="editStatus == 1">
                        <img v-if="thisShopMessage.shopbackPic" :src="thisShopMessage.shopbackPic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
                <div style="" class="row_group">
                    <div class="level">
                        <div>店铺门头照：</div>
                        <div class="confirm_text" v-if="editStatus == 0">
                            <img :src="thisShopMessage.shopMphone" style="width: 74px;height: 74px;" alt="">
                        </div>
                        <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :headers="headers"
                        :show-file-list="false"
                        name="fileName"
                        :on-success="shopMphoneSuccess2"
                        :before-upload="beforeshopMphoneUpload2" v-if="editStatus == 1">
                        <img v-if="thisShopMessage.shopMphone" :src="thisShopMessage.shopMphone" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <div class="rank">
                        <div>店铺营业执照：</div>
                        <div class="confirm_text" v-if="editStatus == 0">
                            <img :src="thisShopMessage.shopBusinessLicense" style="width: 74px;height: 74px;" alt="">
                        </div>
                        <el-upload
                        class="avatar-uploader"
                        :action="url"
                        :headers="headers"
                        :show-file-list="false"
                        name="fileName"
                        :on-success="shopBusinessLicenseSuccess2"
                        :before-upload="shopBusinessLicenseUpload2" v-if="editStatus == 1">
                        <img v-if="thisShopMessage.shopBusinessLicense" :src="thisShopMessage.shopBusinessLicense" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
            </div>

        </div>
            <div class="confirm">
              <div class="confirm_btn fl-center" @click="convertShop">
                <span>确定</span>
              </div>
            </div>
      </div>
      </el-drawer>
  </div>
</template>
<script>
import {
  selectAllZkwlBusinessType,
  updateZkwlBusinessType,
  selectremark,
  selectDaochuruzhu, getThisShopMessage,
} from "@/api/business/entry.js";
import { addBusiness, getOneBusness } from "@/api/business/userlist.js";
import { checkPermi } from "@/utils/permission.js";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import { getToken } from "@/utils/auth";
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  name: "Entry",
  data() {
    return {
      edit: true,
      form2: {
        remark: "",
      },
      options: regionData,
      selectedOptions: [],
      // 商家类型
      // 1--婚纱摄影  2--婚纱礼服  3--婚礼策划  4--婚宴酒店
      shopType: [
        {
          key: "1",
          label: "婚纱摄影",
        },
        {
          key: "2",
          label: "婚纱礼服",
        },
        {
          key: "3",
          label: "婚礼策划",
        },
        {
          key: "4",
          label: "婚宴酒店",
        },
      ],
      // 商家等级
      // 1--金 2--银 3--优选商家
      type: [
        {
          value: 1,
          label: "诚信商家",
        },
        {
          value: 2,
          label: "优选商家",
        },
        {
          value: 3,
          label: "普通商家",
        },
      ],
      // 员工状态
      state: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "禁用",
        },
      ],
      url: process.env.VUE_APP_BASE_API + "/upload/fileUpload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 地图开始
      zoom: 18,
      center: [109.06458, 34.2727],
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false,
      },
      defaultValue: "",
      content: "",
      inputValue: "",
      searchResult: {
        address: "",
        latitude: "",
        longitude: "",
        name: "",
        type: "",
        country: "",
        province: "",
        city: "",
        area: "",
        township: "",
        street: "",
        neighborhood: "",
        locationName: "",
      },
      events: {
        click(e) {
          _this.center = [e.lnglat.lng, e.lnglat.lat];
          // _this.form.lon = e.lnglat.lng;
          // _this.form.lat = e.lnglat.lat;
          _this.getAddress(_this.center);
          _this.defaultValue = "";
        },
      },
      dialogShow: false,
      // 地图结束
      form1: {
        type: 0,
        remark: "",
        shopId: "",
        lrname: "",
        lrtel: "",
        shopName: "",
        shopAddress: "",
        shopPhone: "",
        shopBusinessLicense: "",
        shopMphone: "",
      },
      form: {
        shopMphone: "",
        shopBusinessLicense: "",
        center: "",
        shopaddressb: "",
        shoptype1: "",
        shoptype2: "",
        shoptype3: "",
        shopbackPic: "",
        shopname: "",
        shoplogo: "",
        shopaddress: "陕西省西安市灞桥区",
        password: "",
        type: "",
        shopuser: "",
        shopType: "",
        shopJwd: "109.06458,34.2727",
        shopbrief: "",
        shopTop: "",
        shopspendCmMoney: "",
        shopspendDealMoney: "",
        state: "",
        shoptel: "",
        createtime: "",
        shoprate: "",
        shopnumber: "",
        shangjia_dizhi: "",
        shopid: "",
      },
      title: "",
      title1: "",
      title2: "",
      title3: "",
      zfTitle: '',
      open: false,
      open1: false,
      open2: false,
      open3: false,
      zfOpen: false,
      zfShopId:"",
      srcList: [],
      srcList1: [],
      srcList2: [],
      srcList3: [],
      srcList4: [],
      srcList5: [],
      srcList6: [],
      srcList7: [],
      cancelVal: '',
      // 处理状态
      state1: [
        {
          value: 0,
          label: "已处理",
        },
        {
          value: 1,
          label: "未处理",
        },
      ],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      typeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shopName: "",
        shopPhone: "",
        state1: "",
        shopId: "",
      },
      // 表单校验
      rules: {
        shopTop: [{ pattern: /^[0-9]*$/, message: "商户排序必须为数字" }],
        shopxiane: [
          {
            required: true,
            message: "商铺成交订单扣除界限不能为空",
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*$/,
            message: "成交订单扣除界限必须为整数",
            trigger: "blur",
          },
        ],
        shoplogo: [{ required: true, message: "店铺logo", trigger: "change" }],
        // shopBusinessLicense: [{ required: true, message: "商铺营业执照", trigger: 'change' }],
        shopbackPic: [
          { required: true, message: "商家背景图不能为空", trigger: "change" },
        ],
        //字母加数字，共10-12位
        shopnumber: [
          { required: true, message: "商家账号不能为空", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{3,}$/,
            message: "商家账号长度为数字加字母至少3位",
            trigger: "blur",
          },
        ],
        // 6-10位字母加数字
        password: [
          { required: true, message: "商家密码不能为空", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{6,10}$/,
            message: "密码长度为数字加字母6到10位",
            trigger: "blur",
          },
        ],
        // 电话号验证
        shoptel: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        shopname: [
          { required: true, message: "商户名称不能为空", trigger: "blur" },
        ],
        shopuser: [{ required: true, message: "当前负责人不能为空" }],
        shopType: [{ required: true, message: "商家类型不能为空" }],
        state: [{ required: true, message: "商家状态不能为空" }],
        shopbrief: [
          { required: true, message: "商家简介不能为空", trigger: "blur" },
        ],
        shopmaxPrice: [
          { required: true, message: "最高价格不能为空" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "最高价格必须为数字保留两位小数",
            trigger: "blur",
          },
        ],
        shopminPrice: [
          { required: true, message: "最低价格不能为空" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "最低价格必须为数字保留两位小数",
            trigger: "blur",
          },
        ],
        shopspendCmMoney: [
          { required: true, message: "客资扣费标准不能为空" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "客资扣费标准必须为为数字保留两位小数",
            trigger: "blur",
          },
        ],
        shopspendDealMoney: [
          { required: true, message: "成交扣费标准不能为空" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "成交扣费标准必须为为数字保留两位小数",
            trigger: "blur",
          },
        ],
        shopJwd: [
          { message: "经纬度不能为空" },
          {
            pattern: /^[\d\.\,]+$/,
            message: "经纬度必须是数字",
            trigger: "blur",
          },
        ],
        // 成交扣费比率min=1% max=100%
        shoprate: [
          {
            required: true,
            message: "成交扣费比率不能为空",
            trigger: "change",
          },
        ],
        shoptype1: [
          { required: true, message: "商家标签不能为空", trigger: "blur" },
          {
            max: 4,
            message: "长度为4个字",
            trigger: "blur",
          },
        ],
        shoptype2: [
          {
            max: 4,
            message: "长度为4个字",
            trigger: "blur",
          },
        ],
        shoptype3: [
          {
            max: 4,
            message: "长度为4个字",
            trigger: "blur",
          },
        ],
        // shopaddress:  [{ required: true, message: "商家地址不能为空", trigger: "blur" }],
        shopaddressb: [
          { required: true, message: "商家详细地址不能为空", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "作废原因不能为空", trigger: "blur" },
        ],
      },
      date: {
        shopId: "",
      },
      date1: {
        shopid: "",
        shopIds: "",
      },
      thisShopMessage: {
        center: "",
        shopaddressb: "",
        shoptype1: "",
        shoptype2: "",
        shoptype3: "",
        shopbackPic: "",
        shopname: "",
        shoplogo: "",
        shopaddress: "陕西省西安市灞桥区",
        password: "",
        type: "",
        shopuser: "",
        shopType: "",
        shopJwd: "109.06458,34.2727",
        shopbrief: "",
        shopTop: "",
        shopspendCmMoney: "",
        shopspendDealMoney: "",
        shopuser: "",
        state: "",
        shoptel: "",
        createtime: "",
        shoprate: "",
        shopnumber: "",
        shangjia_dizhi: "",
        shopBusinessLicense: "",
        shopMphone: "",
        precent:50,
        shopArea:"",
        isShop:"",
      },
        drawer: false,
        editStatus: 1,
        options: [{
          selectValue: '选项1',
          label: '支出'
        }, {
          selectValue: '选项2',
          label: '收入'
        }],
        options1: [{
          selectValue: '选项1',
          label: '张三'
        }, {
          selectValue: '选项2',
          label: '李四'
        }],
        options5: [{
          selectValue: '选项1',
          label: '摄影-婚纱摄影（客资扣费标准:￥99.00、成交扣费标准:￥0.00、成交扣费比率:16.34%）'
        }, {
          selectValue: '选项2',
          label: '摄影-全家福（客资扣费标准:￥99.00、成交扣费标准:￥0.00、成交扣费比率:16.34%）'
        }],
        options2: [{
          selectValue: '选项1',
          label: '等级1'
        }, {
          selectValue: '选项2',
          label: '等级2'
        },
        {
          selectValue: '选项3',
          label: '等级3'
        },],
        options3: [{
          selectValue: '1',
          label: '正常'
        }, {
          selectValue: '0',
          label: '禁用'
        }],
        options4: [{
          selectValue: '选项1',
          label: '诚信商家'
        }, {
          selectValue: '选项2',
          label: '普通商家'
        }],
        options5: [{
          selectValue: '选项1',
          label: '正常'
        }, {
          selectValue: '选项2',
          label: '异常'
        }],
        // mouseState: false,
        // curpercentRow: [],
        isDragEnd: false,
        direction: 'rtl',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClose() {
      this.drawer = false;
    },

    //转为商家接口
    handleTransform(row) {
      this.drawer = true;
      console.log(row);
      //获取当前商家信息
      getThisShopMessage(row.shopId).then((respone)=>{
        if (respone.code == 200){
          const data = respone.data;
          this.thisShopMessage = {
            shopname: data.shopName,
            shopaddress: data.shopAddress,
            shoptel: data.shopPhone,
            shopArea:data.shopArea,
            shopBusinessLicense: data.shopBusinessLicense,
            shopMphone: data.shopMphone,
            precent:50,
            isShop: data.type,
          };
        }
      });
      //获取当前全部的员工信息
    },

    //转为商家确定接口
    convertShop() {
      addBusiness(this.thisShopMessage).then((response) => {
        if (response.data.code == 200) {
          this.$modal.msgSuccess(response.data.msg);
          this.open1 = false;
          this.getList();
        } else {
          this.$modal.msgError(response.data.msg);
        }
      });
    },
    close() {
      (this.form = {
        center: null,
        shopaddressb: null,
        shoptype1: null,
        shoptype2: null,
        shoptype3: null,
        shopbackPic: null,
        shopname: null,
        shoplogo: null,
        shopaddress: "陕西省西安市灞桥区",
        password: null,
        type: null,
        shopuser: null,
        shopType: null,
        shopJwd: "109.06458,34.2727",
        shopbrief: null,
        shopTop: null,
        shopspendCmMoney: null,
        shopspendDealMoney: null,
        state: null,
        shoptel: null,
        createtime: null,
        shoprate: null,
        shopnumber: null,
        shangjia_dizhi: null,
        shopid: null,
      }),
        this.getList();
    },
    // 地图开始
    onSearchResult(pois) {
      //搜索
      let latSum = 0;
      let lngSum = 0;
      let that = this;
      if (pois && pois.length > 0) {
        //如果长度为1则无需转化
        let poi = pois[0];
        let lng = poi["lng"];
        let lat = poi["lat"];
        that.center = [lng, lat];
        that.zoom = 18;
        that.content = poi.name;
        that.searchResult.address = poi.address;
        that.searchResult.latitude = poi.lat;
        that.searchResult.longitude = poi.lng;
        that.getAddress(that.center);
      } else {
        that.searchResult = [];
      }
    },
    // 获取详细地址
    getAddress(center) {
      let _this = this;
      let geocoder = new AMap.Geocoder({});
      geocoder.getAddress(center, function (status, result) {
        if (status === "complete" && result.info === "OK") {
          let obj = result.regeocode.addressComponent;
          let locationName =
            obj.province +
            obj.city +
            obj.district +
            obj.township +
            obj.street +
            obj.streetNumber;
          _this.form.shopaddress = obj.province + obj.city + obj.district;
          _this.form.shopJwd = center[0] + "," + center[1];
        }
      });
    },
    // 地图结束
    // 商家地址
    handleChange(value) {
      this.form.shopaddress =
        CodeToText[value[0]] +
        "-" +
        CodeToText[value[1]] +
        "-" +
        CodeToText[value[2]];
    },
    // 上传头像
    handleAvatarSuccess(res, file) {
      this.form.shoplogo = res.data;
      // this.shoplogo = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },
    shopbackPicSuccess(res, file) {
      console.log(res)
      this.form.shopbackPic = res.data;
    },
    shopbackPicUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },
    shopMphoneSuccess(res, file) {
      this.form.shopMphone = res.data;
    },
    beforeshopMphoneUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },
    shopBusinessLicenseSuccess(res, file) {
      this.form.shopBusinessLicense = res.data;
    },
    shopBusinessLicenseUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },

    //转为商家
    // 上传头像
    handleAvatarSuccess2(res, file) {
      console.log(res)
      this.thisShopMessage.shoplogo = res.data;
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },
    shopbackPicSuccess2(res, file) {
      console.log(res)
      this.thisShopMessage.shopbackPic = res.data;
    },
    shopbackPicUpload2(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },
    shopMphoneSuccess2(res, file) {
      this.thisShopMessage.shopMphone = res.data;
    },
    beforeshopMphoneUpload2(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },
    shopBusinessLicenseSuccess2(res, file) {
      this.thisShopMessage.shopBusinessLicense = res.data;
    },
    shopBusinessLicenseUpload2(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      selectAllZkwlBusinessType(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.typeList = response.rows;
          response.rows.forEach((item) => {
            this.srcList.push(item.shopMphone);
            this.srcList1.push(item.shopBusinessLicense);
          });
          this.loading = false;
          this.total = response.total;
        }
      });
    },
    onDragStart(event) {
      this.isDragEnd = true;
      const progressBox = this.$el.querySelector(".progress");
      progressBox.addEventListener("mouseup", this.onDragEnd);
      progressBox.addEventListener("mousemove", this.onDrag);
    },
    onDragEnd() {
      this.isDragEnd = false;
    },
    onDrag(event) {
      if (this.isDragEnd) {
        const progressBox = this.$el.querySelector(".progress");
        const rect = progressBox.getBoundingClientRect();
        const width = rect.width;
        const offsetX = event.clientX - rect.left;
        let percentage = Math.round((offsetX / width) * 100);
        percentage = Math.max(0, Math.min(percentage, 100));
        this.thisShopMessage.precent = percentage;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      selectAllZkwlBusinessType(this.queryParams).then((response) => {
        this.typeList = response.rows;
        this.total = response.total;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        shopName: "",
        shopPhone: "",
        state: "",
        shopId: "",
      };
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.shopId);
      this.single = selection.length !== 1;
    },
    handleUpdate(row) {
      this.open = true;
      this.title = "处理";
      this.form1.shopId = row.shopId;
      this.form.shopid = row.shopId;
      this.form1.lrname = row.lrname;
      this.form1.lrtel = row.lrtel;
      this.form1.shopName = row.shopName;
      this.form1.shopAddress = row.shopAddress;
      this.form1.shopPhone = row.shopPhone;
      this.form1.shopBusinessLicense = row.shopBusinessLicense;
      this.form1.shopMphone = row.shopMphone;
      this.srcList2.push(row.shopMphone);
      this.srcList3.push(row.shopBusinessLicense);
    },
    handleZF(row) {
        this.zfOpen = true;
        this.zfTitle = "作废原因";
        this.form1.shopId = row.shopId;
    },
    submitZF() {

        if (this.cancelVal == "") {
          this.$modal.msgError("请输入作废原因");
        } else {
          updateZkwlBusinessType(this.form1).then((response) => {
            if (response.data.code == 200) {
              this.$modal.msgSuccess(response.msg);
              this.zfOpen = false;
              this.cancelVal = ''
                this.getList();
            }
          });
        }
    },
    submitForm() {
      if (this.form1.type == 0) {
        this.open = false;
        this.open1 = true;
        this.form.shopMphone = this.form1.shopMphone;
        this.form.shopBusinessLicense = this.form1.shopBusinessLicense;
      } else if (this.form1.type == 1) {
        if (this.form1.remark == "") {
          this.$modal.msgError("请输入作废原因");
        } else {
          updateZkwlBusinessType(this.form1).then((response) => {
            if (response.data.code == 200) {
              this.$modal.msgSuccess(response.msg);
              this.open = false;
              (this.form1 = {
                type: 0,
                remark: "",
                shopId: "",
                lrname: "",
                lrtel: "",
                shopName: "",
                shopAddress: "",
                shopPhone: "",
                shopBusinessLicense: "",
                shopMphone: "",
                srcList2: [],
                srcList3: [],
              }),
                this.getList();
            }
          });
        }
      }
    },
    xinzeng() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addBusiness(this.form).then((response) => {
            if (response.data.code == 200) {
              this.$modal.msgSuccess(response.data.msg);
              this.open1 = false;
              this.getList();
            } else {
              this.$modal.msgError(response.data.msg);
            }
          });
        }
      });
    },
    cancelZF() {
        this.zfOpen = false;
        this.cancelVal = ''
    },
    cancel() {
      this.open = false;
      this.open1 = false;
      this.form = {
        center: "",
        shopaddressb: "",
        shoptype1: "",
        shoptype2: "",
        shoptype3: "",
        shopbackPic: "",
        shopname: "",
        shoplogo: "",
        shopaddress: "陕西省西安市灞桥区",
        password: "",
        type: "",
        shopuser: "",
        shopType: "",
        shopJwd: "109.06458,34.2727",
        shopbrief: "",
        shopTop: "",
        shopspendCmMoney: "",
        shopspendDealMoney: "",
        state: "",
        shoptel: "",
        createtime: "",
        shoprate: "",
        shopnumber: "",
        shangjia_dizhi: "",
        shopMphone: "",
        shopBusinessLicense: "",
      };
      this.form1 = {
        type: 0,
        remark: "",
        shopId: "",
      };
    },
    // 查看作废原因
    handlezuofeiLook(row) {
      this.date.shopId = row.shopId;
      selectremark(this.date).then((response) => {
        if (response.code == 200) {
          this.open2 = true;
          this.title2 = "作废原因";
          this.form2.remark = response.data.data.remark;
        }
      });
    },
    // 查看商家
    handleshopLook(row) {
      this.open3 = true;
      this.title3 = "查看商家";
      this.date1.shopid = row.zbshopid;
      this.date1.shopIds = row.shopId;
      getOneBusness(this.date1).then((response) => {
        if (response.data.code == 200) {
          this.form = response.data.data;
          if (this.form.type == 0) {
            this.form.type = "";
          }
          this.form.shopnumber = response.data.data.zkwlBusinessUsPC.shopnumber;
          this.form.shopuser = response.data.data.zkwlBusinessUsPC.shopuser;
          this.form.shoprate = Number(
            response.data.data.zkwlBusinessUsPC.shoprate
          );
          this.form.state = response.data.data.zkwlBusinessUsPC.state;
          this.srcList6.push(response.data.data.shopMphone);
          this.srcList7.push(response.data.data.shopBusinessLicense);
          var bbbb = response.data.data.shopJwd.split(",");
          this.center = [bbbb[0], bbbb[1]];
          var sasasasa = response.data.data.shopaddress.split("/");
          this.form.shopaddress = sasasasa[0];
        }
      });
    },
    look(row) {
      this.srcList.push(row.shopMphone);
    },
    look1(row) {
      this.srcList1.push(row.shopBusinessLicense);
    },
    // 导出
    async handleExport() {
      // this.$confirm('是否确认导出所有用户数据项?', "警告", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning"
      // }).then(function () {
      //     return selectDaochuruzhu();
      // }).then(response => {
      //     this.$download.name(response.msg);
      // }).catch(function () { });
      const queryParams = this.queryParams;
      let res = await selectDaochuruzhu(queryParams);
      if (res.code == 200) {
        this.isloading = false;
        this.$download.name(res.msg);
      }
    },
  },
};
</script>
<style scoped>
.el-form {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.avatar-uploader .el-upload {
  border: 1px solid #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
  border: 1px solid #8c939d;
}

.avatar {
  width: 78px;
  height: 78px;
  display: block;
}
</style>
<style>
/* .search-box {
  margin-top: 6px;
  width: 100%;
}
.search-box input {
  padding: 0 15px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.search-box input:focus {
  border-color: #409eff;
  outline: 0;
}
.search-box input::-webkit-input-placeholder {
  color: #c0c4cc;
} */
.el-vue-search-box-container {
  border: 1px solid #dcdfe6 !important;
}

.tip-box {
  width: 100%;
  max-height: 280px;
  position: absolute;
  top: 72px;
  z-index: 10000;
  overflow-y: auto;
  background-color: #fff;
}
</style>
<style>
.amap-ui-poi-picker-sugg,
.amap_lib_placeSearch {
  border: 1px solid #eee;
  border-radius: 4px;
}

.amap-box {
  height: 200px;
}

.cz {
  display: flex;
  justify-content: center;
  align-items: center;

}

.zuofei {
  display: flex;
  align-items: center;
  margin-right: 15px;
  font-size: 5rpx;
  color: #FF7D00;
  cursor: pointer;
  img {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}
.transform_seller {
  display: flex;
  align-items: center;
  font-size: 5rpx;
  color: #23BB7B;
  cursor: pointer;
  img {
    width: 18px;
    height: 18px;
  }
}
/* ::v-deep .el-dialog__header {
    padding: 0 !important;
    box-sizing: border-box !important;
} */
.zf_title {
    font-weight: 600;
    font-size: 20px;
    color: #1D2129;
    margin-bottom: 10px;
}
.basic_info {
    position: relative;
    .recharge {
        position: absolute;
        right: 10px;
        top: -10px;
    }
}

.basic_info_body {
    width: 1130px;
    /* height: 530px; */
    background: #F5F7FA;
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 14px;
    color: #B0B3B8;
    margin: 0 auto;
}
.basic_title {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
}
.confirm_text {
    font-size: 14px;
    color: #4E5969;
}
.row_group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 15px;
    .row_item {
        display: flex;
        align-items: center;
        width: 50%;
    }
}
.jd_type {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    /* width: 50%; */
}
.level {
    display: flex;
    align-items: center;
    width: 50%;
}
.rank {
    display: flex;
    align-items: center;
    width: 50%;
}
::v-deep .el-drawer__body {
  position: relative;
}
.fl-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 1151px;
  height: 60px;
  box-shadow: 0px 0px 8px 0px #F2F3F5;
  font-size: 14px;
  color: #FFFFFF;
  padding: 14px 20px;
  box-sizing: border-box;
}
.confirm_btn {
  width: 90px;
height: 32px;
background: #5672FA;
border-radius: 4px 4px 4px 4px;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
}
</style>
